(function () {
  let hotData = [
    {
      city: '北京', // 城市
      sales: '25, 179', // 销售额
      flag: true, //  上升还是下降
      brands: [
        //  品牌种类数据
        { name: '可爱多', num: '9,086', flag: true },
        { name: '娃哈哈', num: '8,341', flag: true },
        { name: '喜之郎', num: '7,407', flag: false },
        { name: '八喜', num: '6,080', flag: false },
        { name: '小洋人', num: '6,724', flag: false },
        { name: '好多鱼', num: '2,170', flag: true },
      ],
    },
    {
      city: '河北',
      sales: '23,252',
      flag: false,
      brands: [
        { name: '可爱多', num: '3,457', flag: false },
        { name: '娃哈哈', num: '2,124', flag: true },
        { name: '喜之郎', num: '8,907', flag: false },
        { name: '八喜', num: '6,080', flag: true },
        { name: '小洋人', num: '1,724', flag: false },
        { name: '好多鱼', num: '1,170', flag: false },
      ],
    },
    {
      city: '上海',
      sales: '20,760',
      flag: true,
      brands: [
        { name: '可爱多', num: '2,345', flag: true },
        { name: '娃哈哈', num: '7,109', flag: true },
        { name: '喜之郎', num: '3,701', flag: false },
        { name: '八喜', num: '6,080', flag: false },
        { name: '小洋人', num: '2,724', flag: false },
        { name: '好多鱼', num: '2,998', flag: true },
      ],
    },
    {
      city: '江苏',
      sales: '23,252',
      flag: false,
      brands: [
        { name: '可爱多', num: '2,156', flag: false },
        { name: '娃哈哈', num: '2,456', flag: true },
        { name: '喜之郎', num: '9,737', flag: true },
        { name: '八喜', num: '2,080', flag: true },
        { name: '小洋人', num: '8,724', flag: true },
        { name: '好多鱼', num: '1,770', flag: false },
      ],
    },
    {
      city: '山东',
      sales: '20,760',
      flag: true,
      brands: [
        { name: '可爱多', num: '9,567', flag: true },
        { name: '娃哈哈', num: '2,345', flag: false },
        { name: '喜之郎', num: '9,037', flag: false },
        { name: '八喜', num: '1,080', flag: true },
        { name: '小洋人', num: '4,724', flag: false },
        { name: '好多鱼', num: '9,999', flag: true },
      ],
    },
  ];
  //遍历数组，把左侧sup栏数据显示，利用index显示第一个高亮和第一个右侧数据
  hotData.forEach(function (value, index) {
    let node = `<li class="${index === 0 ? 'active' : ''}">
        <span>${value.city}</span>
        <span>${value.sales} <s class="${
      value.flag ? 'icon-up' : 'icon-down'
    }"></s></span>
        </li>`;
    $('.sup').append(node);
    if (index === 0) {
      hotData[index].brands.forEach(function (value) {
        let node = `<li><span>${value.name}</span><span>${
          value.num
        }</span><s class="${value.flag ? 'icon-up' : 'icon-down'}"></s></li>`;
        $('.sub').append(node);
      });
    }
  });
  // 左侧鼠标移入和移出事件，移入时添加高亮，改变右侧数据
  $('.sup li').hover(
    function () {
      //   利用当前下标可以遍历数组中的第几个对象，nowIndex又与定时器公用下标，所以不在此处定义(原 let index=$(this).index(),而是用nowIndex代替，这种移出后触发定时器，获取的下标就是移入的下标，nowIndex++循环)
      nowIndex = $(this).index();
      load();
      //   移入时清楚定时器，不让定时器自动改变高亮和数据
      clearInterval(timer);
    },
    function () {
      // 鼠标移出就重新调用定时器方法，自动改变高亮和数据
      tt();
    }
  );
  // 改变高亮，和改变右侧数组的封装
  function load() {
    $('.sup li')
      .eq(nowIndex)
      .addClass('active')
      .siblings()
      .removeClass('active');
    //   每次改变右侧数据前要清空数据，不然会越来越多
    $('.sub').empty();
    hotData[nowIndex].brands.forEach(function (value) {
      let node = `<li><span>${value.name}</span><span>${
        value.num
      }</span><s class="${value.flag ? 'icon-up' : 'icon-down'}"></s></li>`;
      $('.sub').append(node);
    });
  }
  let timer;
  let nowIndex = 0;
  // 定时器的封装
  function tt() {
    // 定时器中调用load方法，该变高亮和右侧数据
    timer = setInterval(function () {
      nowIndex++;
      // 如果下标等于数组length长度(length是比下标大1的)，则下标又归于0
      if (nowIndex === $('.sup li').length) {
        nowIndex = 0;
      }
      //前几个功能模块可以直接调用事件(点击），这里不可以直接调用鼠标移入，因为鼠标移入要清除定时器，在鼠标移出的时候再次开启定时器，前几个功能不会在点击事件里移出，或者在点击事件里移出后完成数据显示切换后又在点击事件事件里开启定时器。这里情况不同，是先移入清除，在移出开启，所以无法调用单个事件
      load();
      // 定时器要加事件，不然速度飞起
    }, 1000);
  }
  // 调用定时器函数，不然不执行
  tt();
})();
